<template>
	<el-container class="flex-column-page-wrap group-container">
		<div class="ApprovalList">
			<el-header class="flex flex-align-center" style="padding: 0">
				<el-input v-model="keyword" style="width: 200px" placeholder="搜索" clearable @blur="searchProcess" @clear="searchProcess" />
				<div style="margin-left: auto; flex-shrink: 0">
					<template v-if="!sortFlag">
						<el-button @click="addNewGroupEv">新建分组</el-button>
						<el-button @click="changeComponent">分组排序</el-button>
					</template>
					<template v-else>
						<el-button type="primary" plain :icon="CircleCheck" @click="changeComponent('sort')">完 成</el-button>
						<el-button type="info" plain @click="changeComponent" v-if="false">取 消</el-button>
					</template>
					<el-tooltip content="不可直接审批只能作为流程任务" placement="bottom" effect="light">
						<el-button icon="Plus" @click="createProcessEv('child')">创建子流程</el-button>
					</el-tooltip>
					<el-tooltip content="关联业务逻辑执行的审批流程" placement="bottom" effect="light">
						<el-button icon="Plus" @click="createProcessEv('business')">创建业务审批</el-button>
					</el-tooltip>
					<el-button :type="sortFlag ? 'info' : 'primary'" icon="Plus" :disabled="sortFlag" @click="createProcessEv('index')">创建审批</el-button>
				</div>
			</el-header>
			<div>
				<component :is="typeComponentMap[pageType]" ref="dyncComponent"></component>
			</div>
		</div>
	</el-container>
</template>
<script lang="tsx" setup name="flow_group">
import { ref } from 'vue'
import { CircleCheck } from '@element-plus/icons-vue'
import SortGroup from './components/sortGroup'
import ListGroup from './components/listGroup'
import router from '@/router'
import useFlowStore from '@/store/modules/flow'
const flowStore = useFlowStore()

const sortFlag = ref(false)
const dyncComponent = ref() // 实例化子组件
const typeComponentMap = {
	1: ListGroup,
	2: SortGroup
}
const pageType = ref(1)
const keyword = ref('')

const changeComponent: (sort) => void = async sort => {
	sortFlag.value = !sortFlag.value
	if (pageType.value === 1) {
		pageType.value = 2
		return
	}
	if (pageType.value === 2) {
		// 无效代码
		// if (sort) {
		// 	const data = dyncComponent.value.exportSortData()
		// 	await flowGroup.flowGroupSortApi(data)
		// }
		pageType.value = 1
	}
}

const addNewGroupEv = () => {
	dyncComponent.value.showAddInput()
}

// 调用子组件的方法
const searchProcess = async () => {
	await dyncComponent.value.searchProcessEv({ keyword: keyword.value })
}

const createProcessEv = url => {
	flowStore.$reset()
	setTimeout(() => {
		router.push('/flow_create/' + url)
	}, 0)
}
</script>
<style scoped lang="scss">
.group-container {
	background-color: var(--el-bg-color-page);
	overflow-y: scroll;
	padding-bottom: 15px;
}
.ApprovalList {
	padding: 0 10px;
	//width: 98%;
	//min-width: 900px;
}
</style>
